/**
* 实名认证
*/
import React, { Component } from 'react';
import { View, StyleSheet, Text, Image, TouchableOpacity, ScrollView, TextInput } from "react-native";
import { connect } from 'react-redux';
import { Colors, Dimens, ImageRes } from '../../utils/Assets';
import { create_service } from '../../redux/index.js';
import { Contract } from '../../service/index.js';
import ImagePicker from 'react-native-image-picker'
import { Actions } from 'react-native-router-flux';
import Toast from 'react-native-root-toast';
import { ProgressView } from '../custom/index'
class PersonalAuthOneView extends Component {

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            frontIDCard: '',
            backIDCard: ''
        }
        this.options = {
            title: '选择照片',
            cancelButtonTitle: '取消',
            takePhotoButtonTitle: '拍照',
            chooseFromLibraryButtonTitle: '从相册中选取',
            mediaType: 'photo',
            maxWidth: 750,
            maxHeight: 1000,
            quality: 0.5,
        }
        this.userInfo = props.userInfo
    }
    componentDidMount() {

    }
    componentWillReceiveProps(nextProps) {
        this.userInfo = nextProps.userInfo
    }
    showImagePicker(type) {
        ImagePicker.showImagePicker(this.options, (response) => {
            if (response.didCancel) { } else if (response.error) { } else if (response.customButton) { } else {
                let source = { uri: Dimens.isIOS ? response.uri.replace('file://', '') : response.uri, isStatic: true }
                this.uploadImage(source.uri, type)
            }
        })
    }
    uploadImage(image, type) {
        this.setState({ loading: true })
        let filename = image.substr(image.lastIndexOf('/') + 1)
        let idcard_image = { uri: image, type: 'multipart/form-data', name: filename };
        this.props.dispatch(create_service(Contract.POST_USER_OCR_IDCARD, { idcard_image: idcard_image, type: type, token: this.userInfo.token })).then((res) => {
            if (res) {
                if (type == 'front') {
                    this.setState({ frontIDCard: res.image_path, frontIDCardInfo: res, name: res.name, id_card: res.idcard, loading: false })
                } else {
                    this.setState({ backIDCard: res.image_path, backIDCardInfo: res, loading: false })
                }
            }
            this.setState({ loading: false })
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View style={{ backgroundColor: "#ffffff" }}>
                        <Image source={ImageRes.personal_auth_one} style={{ width: Dimens.DeviceWidth, height: Dimens.DeviceWidth * 0.27 }}></Image>
                        <Text style={{ marginTop: 20, marginLeft: 15, fontSize: 16, color: "#333333", fontWeight: 'bold' }}>请上传身份证</Text>
                        <TouchableOpacity style={{ marginTop: 15, marginHorizontal: 15, backgroundColor: "rgba(55, 142, 251, 0.13)", height: 160, borderRadius: 8, justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                            this.showImagePicker('front')
                        }}>
                            {this.state.frontIDCard ? <Image source={{ uri: this.state.frontIDCard }} style={{ width: Dimens.DeviceWidth - 30, height: 160 }}></Image> : <View style={{ flex: 1, justifyContent: 'center' }}>
                                <View style={{ backgroundColor: "#378EFB", width: 70, height: 70, borderRadius: 35, justifyContent: 'center', alignSelf: 'center' }}>
                                    <Image source={ImageRes.personal_camer_id} style={{ width: 30, height: 23, alignSelf: 'center' }}></Image>
                                </View>
                                <Text style={{ fontSize: 16, color: '#999999', marginTop: 15, alignSelf: 'center' }}>上传正面</Text>
                            </View>}
                        </TouchableOpacity>
                        <TouchableOpacity style={{ marginTop: 15, marginHorizontal: 15, backgroundColor: "rgba(55, 142, 251, 0.13)", height: 160, borderRadius: 8, justifyContent: 'center' }} activeOpacity={0.8} onPress={() => {
                            this.showImagePicker('back')
                        }}>
                            {this.state.backIDCard ? <Image source={{ uri: this.state.backIDCard }} style={{ width: Dimens.DeviceWidth - 30, height: 160 }}></Image> : <View style={{ flex: 1, justifyContent: "center" }}>
                                <View style={{ backgroundColor: "#378EFB", width: 70, height: 70, borderRadius: 35, justifyContent: 'center', alignSelf: 'center' }}>
                                    <Image source={ImageRes.personal_camer_id} style={{ width: 30, height: 23, alignSelf: 'center' }}></Image>
                                </View>
                                <Text style={{ fontSize: 16, color: '#999999', marginTop: 15, alignSelf: 'center' }}>上传反面</Text>
                            </View>}
                        </TouchableOpacity>
                        <Text style={{ marginVertical: 20, marginLeft: 15, fontSize: 14, color: "#999999", lineHeight: 22 }}>温馨体时：请采用标准拍摄，避免反光和模糊，避免照片太小。</Text>
                    </View>
                    <View style={{ marginTop: 10 }}>
                        <View style={{ paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', backgroundColor: "#ffffff" }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>真实姓名</Text>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.setState({ name: text })
                                }}
                                placeholderTextColor={'#999999'}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入姓名'}
                                value={this.state.name}
                            />
                        </View>
                        <View style={{ paddingHorizontal: 15, paddingVertical: 5, flexDirection: 'row', marginTop: 1, backgroundColor: "#ffffff" }}>
                            <Text style={{ fontSize: 15, color: "#333333", alignSelf: 'center', width: 100 }}>身份证</Text>
                            <TextInput style={{ fontSize: 15, color: '#333333', height: 40, flex: 1 }}
                                onChangeText={(text) => {
                                    this.setState({ id_card: text })
                                }}
                                placeholderTextColor={'#999999'}
                                maxLength={18}
                                underlineColorAndroid={'transparent'}
                                placeholder={'请输入身份证号码'}
                                value={this.state.id_card}
                            />
                        </View>
                    </View>
                    <TouchableOpacity style={{ marginVertical: 30, backgroundColor: '#378EFB', justifyContent: 'center', marginHorizontal: 15, paddingVertical: 15, borderRadius: 5 }} activeOpacity={0.8} onPress={() => {
                        if (!this.state.frontIDCard) {
                            Toast.show('请上传身份证正面', { position: Toast.positions.CENTER })
                            return
                        }
                        if (!this.state.backIDCard) {
                            Toast.show('请上传身份证反面', { position: Toast.positions.CENTER })
                            return
                        }
                        if (!this.state.name) {
                            Toast.show('请输入真实姓名', { position: Toast.positions.CENTER })
                            return
                        }
                        if (!this.state.id_card) {
                            Toast.show('请输入身份证号', { position: Toast.positions.CENTER })
                            return
                        }
                        Actions.personalAuthTwoView({ real_name: this.state.name, id_card: this.state.id_card })
                    }}>
                        <Text style={{ fontSize: 15, color: "#ffffff", alignSelf: 'center' }}>提交</Text>
                    </TouchableOpacity>
                </ScrollView>
                <ProgressView show={this.state.loading} />
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Colors.bg_color
    }
});
function mapStateToProps(state) {
    return {
        userInfo: state.auth.userInfo
    }
}
const ExportView = connect(mapStateToProps)(PersonalAuthOneView);
module.exports.PersonalAuthOneView = ExportView
